<template>
  <div class="h-[130px] w-[360px] relative group">
    <el-image fit="cover" class="w-full h-full rounded-[8px] !overflow-hidden" :src="netPath(src)">
    </el-image>
    <div
      class="absolute cursor-pointer left-0 top-0 rounded-[8px] !overflow-hidden w-full h-full bg-[#000000aa] flex justify-center items-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
    >
      <el-icon class="mr-[10px]" size="20" color="#fff" @click="previewVisible = true"
        ><View
      /></el-icon>
      <el-icon size="20" color="#fff" @click="emit('delete')"><Delete /></el-icon>
    </div>
    <el-dialog append-to-body title="预览" v-model="previewVisible" width="440px">
      <div class="flex justify-center items-center pb-[20px]">
        <el-image lazy class="w-min-[360px] w-full p-[10px]" :src="netPath(src)" fit="contain">
          <template #error>
            <div class="image-slot">
              <el-icon><CarNoImage /></el-icon>
            </div>
          </template>
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { netPath } from "@/utils/common";

withDefaults(
  defineProps<{
    src: string;
  }>(),
  {}
);
const emit = defineEmits(["delete"]);
const previewVisible = ref(false);
</script>
